@extends('app')

@section('css')
    <style>
    .add {
        border: 1px dashed #e2e2e2;
        background: #F9F9F9;
        text-align: center
    }

    .add i {
        line-height: 150px;
        font-size: 80px
    }

    .r p {
        text-align: center;
        line-height: 38px
    }

    .edit {
        color: #fff;
        font-size: 20px;
        text-align: center;
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        margin-top: 0px;
        z-index: 9999;
        width: 100%;
        height: 0px;
        overflow: hidden
    }

    .edit i {
        font-size: 40px;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 40px;
        line-height: 100px;
        padding: 10px
    }

    .cmdlist-container {
        padding: 5px;
        height: 210px;
        border: 1px solid #f2f2f2;
        text-align: center;

    }
    .cmdlist-container a:first-child{
        background: #F9F9F9;
        border: 1px dashed #e2e2e2;
    }

    .cmdlist-container a {
        position: relative;
        display: block;
        cursor: pointer;
        display: -webkit-box; /*设置容器显示为webkit盒子。*/
        -webkit-box-orient: vertical; /*设置盒子内文字显示方向*/
        -webkit-line-clamp: 3; /*文字限制为指定的行数*/
        text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本。*/
        overflow: hidden; /*隐藏不需要显示的部分*/
    }
    .cmdlist-container h2{
        position: absolute;
        width: 100%;
        height: 150px;
        line-height: 150px;
        text-align: center;
        color: #fff;
        font-size: 24px;
        font-weight: bold;
    }

    .cmdlist-container img {
        height: 150px;
        max-width: 100%
    }
</style>
@endsection
@section('content')
    <div class="layui-card" style="margin-bottom: 0;">
        @include('layouts.breadcrumb')

        <div class="layui-tab-content layui-col-space30">

            <div class="layui-col-md2 layui-col-sm3">
                <div class="cmdlist-container" style="">
                <div class="r">
                    <div class="add" style="" onclick="newWindow('添加文档','/doc/edit','500','550')">
                        <i class="layui-icon layui-icon-addition"></i>
                    </div>
                    <p>点击添加文档</p>
                </div>
                </div>
            </div>

            @foreach($model as $item)

                <div class="layui-col-md2 layui-col-sm3">
                <div class="cmdlist-container" style="">
                    <a href="javascript:;">
                        <div class="edit" onclick="newWindow('文档详情','/doc/edit?id={{$item->id}}')">
                            <i class="layui-icon layui-icon-addition"></i>
                            <p>详情</p>
                        </div>
                        <h2>{{ $item->name }}</h2>
                        <img src="{{ $item->icon }}">
                    </a>
                    <a onclick="newTab('文档详情','/doc/info/index?doc_id={{$item->id}}')">
                        <div class="cmdlist-text">
                            <p class="info">{{ $item->description }}</p>
                        </div>
                    </a>
                </div>
            </div>

            @endforeach

            <div style="clear: both"></div>
        </div>
        <div id="page"style="border-top: 1px dotted #e2e2e2;text-align: center;padding: 20px 0;"></div>
    </div>

@endsection

@section('js')
    <script>
        layui.use(['layer','laypage'], function () {
            var $ = layui.$;
            //特效
            $('.cmdlist-container a').hover(function () {
                $(this).find('.edit').stop();
                $(this).find('.edit').animate({height: '150px'},'fast');
            }, function () {
                $(this).find('.edit').stop();
                $(this).find('.edit').animate({height: '0'},'fast');
            })

            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                ,limit:{{$model->perPage()??0}}
                ,count: {{$model->total()??0}} //数据总数，从服务端得到
                ,curr:{{$model->currentPage()??1}}
                ,jump: function(obj, first){
                    // console.log(obj);
                    //首次不执行
                    if(!first){
                        window.location.href = "{{URL::current()}}?page="+obj.curr
                    }
                }
            });

        })
    </script>
@endsection